'use strict'
import React from 'react';
import {Icon, TabBar} from '@ant-design/react-native';

import Home from './app/Home/Home';
import List from './app/List/List';
import Me from './app/Me/Me';

export default class BasicTabBarExample extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedTab: 'redTab',
    };
  }

  onChangeTab(tabName) {
    this.setState({
      selectedTab: tabName,
    });
  }
  render() {
    return (
        <TabBar
            unselectedTintColor="#949494"
            tintColor="#33A3F4"
            barTintColor="#f5f5f5">
          <TabBar.Item
              title="首页"
              icon={<Icon name="home" />}
              selected={this.state.selectedTab === 'home'}
              onPress={() => this.onChangeTab('home')} >
              <Home />
          </TabBar.Item>
          <TabBar.Item
              icon={<Icon name="ordered-list" />}
              title="列表"
              badge={2}
              selected={this.state.selectedTab === 'list'}
              onPress={() => this.onChangeTab('list')} >
              <List/>
          </TabBar.Item>
          <TabBar.Item
              icon={<Icon name="user"  />}
              title="我的"
              selected={this.state.selectedTab === 'me'}
              onPress={() => this.onChangeTab('me')} >
              <Me/>
          </TabBar.Item>
        </TabBar>
    );
  }
}